<%--
  Created by IntelliJ IDEA.
  User: dengyinhui
  Date: 2021/4/12
  Time: 11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>音乐播放器</title>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jQuery.js"></script>
</head>
<style>
    div {
        margin: 5px;
        border: 1px solid red;
    }

    .music-ul-li {
        display: inline-block;
    }

    .music-ul:hover {
        background: red;
    }

</style>
<body>
<div>
    <div style="width: calc(100% - 10px);height: 300px">
        <div id="musicpage"></div>
    </div>
</div>
</body>
<script>
    let list = [];

    //获取全部歌曲表单
    function Musicpage() {
        $.ajax({
            type: "GET",
            url: `http://120.79.191.86:8088/MyMusic/music/column`,
            success: function (res) {
                list = res;
                if (res != null) {
                    $(`#musicpage`).html(`       <tr>
            <td class="music-ul-li">歌曲</td>
            <td class="music-ul-li">名字</td>
        </tr>`);
                    for (var i = 0; i < list.length; i++) {
                        $(`#musicpage`).append(`
             <tr class="music-ul"   onclick="Musicplay(${list[i].music_url})">
            <td class="music-ul-li">${list[i].music_name}</td>
            <td class="music-ul-li">${list[i].music_singer}</td>
            <td class="music-ul-li">${list[i].music_url}</td>
            </tr>`);
                    }
                }
            }
        });
    }

    Musicpage();
    //点击音乐播发
    function Musicplay(musicurl) {
        console.log(musicurl)
    }
</script>
</html>
